<template>
  <div class="hello">
    <div id="container"></div>
  </div>
</template>

<script>
	import dd from '../assets/custom_map_config.json'
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  mounted() {
	  this.$nextTick(function(){
		  this.hangleMap();
	  })
  },
  methods:{
	  // 地图加载
	  hangleMap(){
		  var map = new BMapGL.Map('container');
		  console.log(map)
		  map.centerAndZoom(new BMapGL.Point(119.020173, 29.077973), 18);
		  map.enableScrollWheelZoom(true);
		  map.setMapStyleV2({styleJson: dd});
		  
		  var data_info = [[119.020173,29.077973,"地址：北京市东城区王府井大街88号乐天银泰百货八层"],
		  							 [119.020173,29.077973,"地址：北京市东城区东华门大街"],
		  							 [119.02044,29.08163,"地址：北京市东城区正义路甲5号"]
		  				];
		  var opts = {
		  			width : 250,     // 信息窗口宽度
		  			height: 80,     // 信息窗口高度
		  			title : "信息窗口" , // 信息窗口标题
		  			enableMessage:true//设置允许信息窗发送短息
		  		   };
		  for(var i=0;i<data_info.length;i++){
		  	var marker = new BMapGL.Marker(new BMapGL.Point(data_info[i][0],data_info[i][1]));  // 创建标注
		  	var content = data_info[i][2];
		  	map.addOverlay(marker);               // 将标注添加到地图中
		  	addClickHandler(content,marker);
		  }
		  function addClickHandler(content,marker){
		  	marker.addEventListener("click",function(e){
		  		openInfo(content,e)}
		  	);
		  }
		  function openInfo(content,e){
		  	var p = e.target;
		  	var point = new BMapGL.Point(p.getPosition().lng, p.getPosition().lat);
		  	var infoWindow = new BMapGL.InfoWindow(content,opts);  // 创建信息窗口对象 
		  	map.openInfoWindow(infoWindow,point); //开启信息窗口
		  }
		  // map.setHeading(64.5);   //设置地图旋转角度
		  // map.setTilt(73);  
	  }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    #container {
        overflow: hidden;
        width: 100%;
        height: 100vh;
        margin: 0;
    }
    .info {
        z-index: 999;
        width: auto;
        min-width: 22rem;
        padding: .75rem 1.25rem;
        margin-left: 1.25rem;
        position: fixed;
        top: 1rem;
        background-color: #fff;
        border-radius: .25rem;
        font-size: 14px;
        color: #666;
        box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
    }
    ul li {
        list-style: none;
    }
    .drawing-panel {
        z-index: 999;
        position: fixed;
        bottom: 3.5rem;
        margin-left: 3rem;
        padding: 1rem 1rem;
        border-radius: .25rem;
        background-color: #fff;
        box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
    }
    .btn {
        width: 75px;
        height: 30px;
        float: left;
        background-color: #fff;
        color: rgba(27, 142, 236, 1);
        font-size: 14px;
        border:1px solid rgba(27, 142, 236, 1);
        border-radius: 5px;
        margin: 0 5px;
        text-align: center;
        line-height: 30px;
    }
    .btn.current {
        background-color: rgba(27, 142, 236, 1);
        color: #fff;
    }
    .btn:hover {
        background-color: rgba(27, 142, 236, 0.8);
        color: #fff;
    }
</style>
